<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>2_data的两种写法</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="app"></div>
  </body>
  <script type="text/javascript">
    // 阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false;

    // 第一种写法 data: 普通对象
    // const vm = new Vue({
    //   el: "#app",
    //   data: {
    //     message: "Hello",
    //   },
    // });

    // 第二种写法 data: 函数
    const vm = new Vue({
      el: "#app",
      data() {
        // this 是 Vue 实例
        console.log(this);
        return {
          message: "Hello",
        };
      },
    });
  </script>
</html>
